<template>

    <div>
          <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    
      <!-- 卡片视图区域 -->
    <el-card>
        <!-- 添加按钮区 -->
        <el-row>
        <el-col>
            <el-button type="primary" @click="dialogVisble">添加角色</el-button>          
        </el-col>
    </el-row>
          <!-- 角色列表区域 -->
      <el-table  border stripe :data="roleList">
        <el-table-column type="expand">
          <!-- 角色 -->
          <template slot-scope="scope">
            <!-- 一级权限 -->
              <el-row :class="['bdbottom','vcenter',li===0 ?'bdtop':'' ]" 
              v-for="(item, li) in scope.row.children" :key="item.id" >
                  <el-col :span="5">
                    <el-tag closable @close="removeById(scope.row,item.id)">{{item.authName}} </el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="19">
                    <!-- 二级权限 -->
                    <el-row :class="[l2===0?'':'bdtop','vcenter']" 
                    v-for="(item2,l2) in item.children" :key="item2.id">
                      <el-col :span="6">
                        <el-tag type="success" closable @close="removeById(scope.row,item2.id)">{{item2.authName}} </el-tag>
                        <i class="el-icon-caret-right"></i>
                      </el-col>
                      <!-- 三级权限 -->
                      <el-col :span="18"> 
                          <el-tag closable type="warning" v-for="(item3) in item2.children" :key="item3.id" 
                          @close="removeById(scope.row,item3.id)"> 
                             {{item3.authName}}
                          </el-tag>
    
                      </el-col>
                    </el-row>
                  </el-col>
              </el-row>
          </template>
        </el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" width="400px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeRoleById(scope.row.id)">删除</el-button>
            <!-- 分配权限按钮 -->
            <el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetRightDialog(scope.row)">分配权限</el-button>
  
          </template>
        </el-table-column>
      </el-table>  
  </el-card>
     <!-- 分配权限的对话框 -->
    <el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%" @close="closeRightDialog">
      <!-- 树形控件 -->
      <el-tree :data="rightList" :props="treeProps" show-checkbox node-key="id" 
      default-expand-all :default-checked-keys="defKeys" ref="treeRef"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sloatRight">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            roleList:[],
            setRightDialogVisible:false,
            rightList:[],
            //树形控件的属性绑定对象
            treeProps:{
              label:'authName',
              children:'children'
            },
            defKeys:[],
            roleId :''
        }
    },
    methods:{
       async getRolesList(){
        const {data:res}  =   await this.$http.get('roles')
        if(res.meta.status !==200) return this.$message.error(res.meta.msg)
        this.roleList = res.data;
        this.$message.success(res.meta.msg)
        },
        dialogVisble(){

        },
        //打开角色对话框
        showEditDialog(id){

        },
        //打开分配权限对话框,，并显示所有的权限
        async showSetRightDialog(role){
          this.roleId = role.id
          const {data:res} = await this.$http.get('rights/tree')
          if(res.meta.status != 200){
                return this.$message.error(res.meta.msg)
            }
          this.rightList = res.data;
          this.getDefKeys(role,this.defKeys)
          this.setRightDialogVisible = true;
        },
        //关闭分配权限对话框
        closeRightDialog(){
          this.defKeys = [];
        },
        //删除角色
        removeRoleById(id){

        },
        //删除三级权限
        async removeById(role,rightId){
          console.log(role.id);
          console.log(rightId);
        //先询问再删除
           const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'}).catch(err=>err)
            //如果点击确定返回confirm文本，点击取消则异常
            if(confirmResult !=='confirm'){
                return this.$message.info('已经取消删除！');    
            }
            const {data:res} = await this.$http.delete('roles/'+role.id+'/rights/'+rightId)
            if(res.meta.status != 200){
                return this.$message.error(res.meta.msg)
            }
            this.$message.success(res.meta.msg)
            role.children = res.data;
        },
    //通过递归找三级节点
       getDefKeys(node,arr){
         if(!node.children){
          return arr.push(node.id)
         }
         node.children.forEach(item => {
           this.getDefKeys(item,arr)
         });
       },
       //为用户添加权限
       async sloatRight(){
          const keys = [
            ...this.$refs.treeRef.getCheckedKeys(),
            ...this.$refs.treeRef.getHalfCheckedKeys()
          ]
          const idStr = keys.join(',');
          const {data: res} = await this.$http.post(`roles/${this.roleId}/rights`,{rids:idStr})
          if(res.meta.status != 200){
                return this.$message.error(res.meta.msg)
            }
          this.$message.success(res.meta.msg)
          this.getRolesList();
          this.setRightDialogVisible=false   
       }
    },
    created(){
        this.getRolesList();
    }
}
</script>

<style lang="less" scoped>
.el-tag{
  margin: 7px;
}
.bdtop{
  border:1px solid #eee,
}
.bdbottom{
  border:1px solid #eee,
}
.vcenter{
  display: flex;
  align-items: center;
}
</style>

